<template>
	<view class="task">
		<view class="navigationBar">
			<tui-icon name="arrowleft" color="#ffffff" :size="50" class="navIcon" @click="tolastPage"></tui-icon>
			<view class="navText">任务管理</view>
		</view>
		<view class="searchFor">
			<input v-model="imputData" class="searchInput" type="text" placeholder="搜索任务" />
			<span @click="searchConten">搜索</span>
		</view>
		<view class="table">
			<view :class="this.activeTab == '1' ? 'tableList tableListColor' : 'tableList'" @click="obtainConten('1')">全部（2）</view>
			<view :class="this.activeTab == '2' ? 'tableList tableListColor' : 'tableList'" @click="obtainConten('2')">未完成（2）</view>
			<view :class="this.activeTab == '3' ? 'tableList tableListColor' : 'tableList'" @click="obtainConten('3')">已完成（2）</view>
		</view>
		<view class="content">
			<view class="contentList" v-for="item in dataList" @click="toDetails(item.id)">
				<view class="contentListTop">
					<view class="contentListtitle">
					{{item.title}}
					</view>
					<view class="contentListstate">
						<span style="background: #d9001b;" v-if="item.state == '1'">待接收</span>
						<span style="background: #fe7a21;" v-else-if="item.state == '2'">待完成</span>
						<span style="background: #137a29;" v-else>已完成</span>
					</view>
				</view>
				<view class="contentListTime">
					事发时间：{{item.time}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>

	export default {
		components: {
		},
		data() {
			return {
				activeTab:'1',
				dataList:[
					{id:'123456', title:'标题1', time:'2023-02-08', state:'1'},
					{id:'561615', title:'标题2', time:'2023-06-08', state:'2'},
					{id:'496166', title:'标题3', time:'2023-02-09', state:'3'},
					{id:'123456', title:'标题1', time:'2023-02-08', state:'1'},
					{id:'561615', title:'标题2', time:'2023-06-08', state:'2'},
					{id:'496166', title:'标题3', time:'2023-02-09', state:'3'},
					{id:'123456', title:'标题1', time:'2023-02-08', state:'1'},
					{id:'561615', title:'标题2', time:'2023-06-08', state:'2'},
					{id:'496166', title:'标题3', time:'2023-02-09', state:'3'},
					{id:'123456', title:'标题1', time:'2023-02-08', state:'1'},
					{id:'561615', title:'标题2', time:'2023-06-08', state:'2'},
					{id:'496166', title:'标题3', time:'2023-02-09', state:'3'},
					{id:'123456', title:'标题1', time:'2023-02-08', state:'1'},
					{id:'561615', title:'标题2', time:'2023-06-08', state:'2'},
					{id:'496166', title:'标题3', time:'2023-02-09', state:'3'},
				]
			};
		},
		computed: {},
		onLoad() {},
		onUnload() {},
		onShow() {
			
		},
		
		methods: {
			tolastPage(){
				wx.navigateBack({
				  delta: 1 
				})
			},
			searchConten(){
				console.log('搜索'+this.imputData)
			},
			obtainConten(text){
				this.activeTab = text
			},
			toDetails(id){
				uni.navigateTo({
				  url: '/pages/policeEnd/details',
				  success: function(res) {
				    uni.$emit('eventName', { uid: id });  // 发送事件
				  }
				});
			}
		}
	}
</script>

<style lang="scss">
	.task{height: 100vh;}
	.navigationBar{position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 180rpx; background: url('../../static/imgs/headbg.png') no-repeat; background-size: 100% 100%;
		.navIcon{position: absolute; left: 0;}
		.navText{font-size: 45rpx;}
	}
	.searchFor{padding: 0 50rpx; margin: 20rpx 0; display: flex; align-items: center; justify-content: space-between;
		.searchInput{border: 1rpx solid #aaaaaa; border-radius: 50rpx; height:85rpx; width: calc(100% - 120rpx); padding-left: 20rpx;}
		span{font-size: 37rpx;}
	}
	.table{display: flex; align-items: center; padding: 15rpx 40rpx;
		.tableListColor{color: #0000FF;}
		.tableList{width: 33.3%; font-size: 30rpx; text-align: center;}
	}
	.content{ padding: 0 20rpx; height: calc(100% - 180rpx - 40rpx - 100rpx - 90rpx); overflow-y: auto;
		.contentList{ margin-top: 30rpx; padding: 30rpx 30rpx; border:1rpx solid rgba(149, 156, 166, 0.2); border-radius: 10rpx;
			.contentListTop{display: flex; align-items: center; margin-bottom: 20rpx;
				.contentListtitle{
					width: calc(100% - 120rpx);
					font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
					font-weight: 650;
					font-size: 40rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
				.contentListstate{width: 120rpx;
					span{padding: 5rpx 15rpx; color: #ffffff; border-radius: 10rpx;}
				}
			}
			.contentListTime{
				font-size: 28rpx;
				color: #959CA6;
			}
		}
	}
</style>